﻿
@{
    Layout = null;

}
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/js/bootstrapValidator/bootstrapValidator.css" rel="stylesheet" />
<link href="~/Content/css/materialdesignicons.min.css" rel="stylesheet">
<link href="~/Content/css/style.min.css" rel="stylesheet">

<script type="text/javascript" src="~/Content/js/jquery.min.js"></script>
<script type="text/javascript" src="~/Content/js/bootstrap.min.js"></script>
<script src="~/Content/js/jquery.form.js"></script>
<script src="~/Content/js/lightyear.js"></script>
<script src="~/Content/js/bootstrapValidator/bootstrapValidator.js"></script>
<link href="~/Content/js/bootstrapValidator/bootstrapValidator.min.css" rel="stylesheet" />
<style>
    .lyear-wrapper {
        position: relative;
    }

    .lyear-login {
        display: flex !important;
        min-height: 100vh;
        /*align-items: center !important;*/
        justify-content: center !important;
    }

    .login-center {
        background: #fff;
        min-width: 38.25rem;
        padding: 2.14286em 3.57143em;
        border-radius: 5px;
        margin: 2.85714em 0;
    }

    .login-header {
        margin-bottom: 1.5rem !important;
    }

    .login-center .has-feedback.feedback-left .form-control {
        padding-left: 38px;
        padding-right: 12px;
    }

    .form-control-feedback {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 2;
        display: block;
        width: 34px;
        height: 34px;
        line-height: 34px;
        text-align: center;
        pointer-events: none;
    }

    .login-center .has-feedback.feedback-left .form-control-feedback {
        left: 0;
        right: auto;
        width: 38px;
        height: 38px;
        line-height: 38px;
        z-index: 4;
        color: #dcdcdc;
    }

    .login-center .has-feedback.feedback-left.row .form-control-feedback {
        left: 15px;
    }

    .btn-primary {
        background-color: #2a3575;
        border-color: #2a3575;
        color: #fff !important;
    }

    .form-control:focus {
        border-color: #33cabb;
        outline: 0;
        -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(51, 202, 187, .6);
        box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(42, 53, 117, .6);
    }

    .btn-primary:not([disabled]):not(.disabled).active, .btn-primary:not([disabled]):not(.disabled):active, .show > .btn-primary.dropdown-toggle {
        background-color: #2a3575 !important;
        border-color: #2a3575 !important;
        -webkit-box-shadow: none;
        box-shadow: none;
    }

    .btn-primary:focus, .btn-primary.focus, .btn-primary.active, .btn-primary:active, .open > .dropdown-toggle.btn-primary {
        background-color: #2a3575 !important;
        border-color: #2a3575 !important;
    }

    btn-primary:hover {
        background-color: #2a3575;
        border-color: #2a3575;
    }

    .has-feedback {
        position: relative;
    }

    .btn-primary.disabled, .btn-primary:disabled {
        background-color: #2a3575;
        border-color: #2a3575;
        opacity: 0.5;
    }

    .btn-primary:hover {
        background-color: #2a3575;
        border-color: #2a3575;
    }
</style>
@using AngelCMS.module.Models;
@using System.Data;
<div class="row lyear-wrapper">
    <div class="lyear-login">
        <div class="login-center">
            <div class="login-header text-center">
                <a href="#!"> <img alt="light year admin" src="/Content/images/logo.jpg"> </a>
            </div>
            @{ 
                          DataTable dt = ViewBag.Macthdt;
                            <form action="/Home/ResultIndex" method="post" id="form1">
                                <div class="text-center">
                                    <div><label id="matchName">@dt.Rows[0]["MatchName"]</label></div>
                                    <input type="hidden" name="MatchName" value="@dt.Rows[0]["MatchName"]" />
                                    <div><label>-中国赛区比赛结果查询-</label></div>
                                </div>

                                <div class="form-group has-feedback feedback-left">
                                    <select class="form-control" id="MatchArea" name="MatchArea" size="1">
                                        <option value="0">请选择</option>
                                        <option value="1">选项 #1</option>
                                        <option value="2">选项 #2</option>
                                        <option value="3">选项 #3</option>
                                    </select>
                                    <span class="mdi mdi-map form-control-feedback" aria-hidden="true"></span>
                                </div>

                                <div class="form-group has-feedback feedback-left">
                                    <input type="text" placeholder="选手手机号" class="form-control" name="PhoneNumber" id="PhoneNumber" maxlength="13" />
                                    <span class="mdi mdi-cellphone form-control-feedback" aria-hidden="true"></span>
                                </div>
                                <div class="form-group has-feedback feedback-left">
                                    <input type="text" placeholder="选手姓名" class="form-control" id="UserName" name="UserName" maxlength="50" />
                                    <span class="mdi mdi-account form-control-feedback" aria-hidden="true"></span>
                                </div>

                                <div class="form-group">
                                    <button class="btn btn-block btn-primary" type="submit">查询</button>
                                </div>
                            </form>
            }
            <hr>

        </div>
    </div>
</div>
<script>

    $(function () {
        GetSelectList();
    });

    function GetSelectList() {
        var matchName = $("#matchName").text();
        $.ajax({
            url: "/Area/GeSelectList",
            dataType: "json",
            success: function (data) {
                if (data != null) {
                    if (data != null && data.length > 0) {
                        var strHtml = "";
                        for (var i = 0; i < data.length; i++) {
                            var val = data[i].AreaName;
                            strHtml = strHtml + ' <option value=' + data[i].ID + '>' + val + '</option>';
                        }
                        $("#MatchArea").html("");

                        $("#MatchArea").html(strHtml);
                    }

                }
            }
        })
    }


    $('#form1').bootstrapValidator({
        live: 'submitted', //enabled代表当表单控件内容发生变化时就触发验证，默认提交时验证，
        // disabled和submitted代表当点击提交按钮时触发验证

        feedbackIcons: {  //显示表单验证结果的图标
            //valid: 'glyphicon glyphicon-ok',
            //invalid: 'glyphicon glyphicon-remove',
            //validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            PhoneNumber: {
                validators: {
                    notEmpty: {
                        message: '手机号不能为空'
                    },
                    regexp: {//正则验证
                        regexp: /^1(3|4|5|7|8)\d{9}$/,
                        message: '所输入的字符不符要求'
                    }
                }
            },
            UserName: {
                validators: {
                    notEmpty: {
                        message: '选手姓名不能为空'
                    }


                }
            }
        }
    })
    //$("#form1").ajaxForm(options);
    function search() {
        var options = {
            url: "/Home/Search",
            data: { matchName: $("#matchName").text() },
            type: "post",
            success: function (data) {
                if (data == "1") {
                    lightyear.notify('操作成功~', 'success', 3000, 'mdi mdi-emoticon-happy', 'top', 'center');

                }
                return false
            }
        };

        $("#form1").ajaxForm(options);
    }
</script>

